// 下载好后定义路由
// 引入vue和路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入页面组件
// import FenLei from '@/views/FenLei'
// import GouWuChe from '@/views/GouWuChe.vue'
// import Home from '@/views/Home.vue'
// import WoDe from '@/views/WoDe.vue'
// import ZHuaNTi from '@/views/ZHuaNTi.vue'
// import Search from "@/views/Search.vue"
// import XIAngQIng from "@/views/XIAngQIng.vue"
// import Channel from "@/views/Channel.vue"

// 配置路由规则
const routes = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/home',//首页
    component: () => import('@/views/Home.vue'),//路由懒加载
    name: 'home',
    meta: {
        isshowtanbar: true
    },
    // 注意这里是数组

    children: [{
        path: 'search', //搜索页的二级路由在首页
        component: () => import('@/views/Search.vue'),
        meta: {
            isshowtanbar: false
        }
    }]
}, {
    path: '/zt',//专题
    component: () => import('@/views/ZHuaNTi.vue'),
    name: 'zt',
    meta: {
        isshowtanbar: true //路由元信息给当前路由添加一些标记信息
    }
}, {
    path: '/fl',//分类
    component: () => import('@/views/FenLei.vue'),
    name: 'fl',
    meta: {
        isshowtanbar: true
    }
}, {
    path: '/gwc',//购物车
    component: () => import('@/views/GouWuChe.vue'),
    name: 'gwc',
    meta: {
        isshowtanbar: true
    }
}, {
    path: '/wd',//我的
    component: () => import('@/views/WoDe.vue'),
    name: 'wd',
    meta: {
        isshowtanbar: true
    }
}, {
    path: '/xq',//详情
    component: () => import('@/views/XIAngQIng.vue'),
    name: 'xq',
    meta: {
        isshowtanbar: false
    }
}, {
    path: '/channel',//点击首页的导航栏跳转的页
    component: () => import('@/views/Channel.vue'),
    name: 'channel',
    meta: {
        isshowtanbar: false
    }
}]

// 创建路由实例对象
const router = new VueRouter({
    // 路由模式，常用
    mode: 'history',
    routes,

})

// 创建全局路由前置守卫
// 监控全局所有路由导航，项目中只要有路由跳转，就会执行beforeEach中的函数
router.beforeEach((to, from, next) => {
    // 注意写next表示放行所以要让其他的全部放行，
    next()
    // 判断当访问购物车页的时候是否用户已经登录如果没有登录就跳转到登录页
    if (to.path == '/gwc') {
        //去购物车页
        // 获取token值
        const token = localStorage.getItem('token');//返回值要不是字符串，要不是null
        if (token) {
            //说明已经登录过
            // 写next表示放行
            next()
        } else {
            //没有登录就跳转到我的页
            // 先提示登录再跳转
            // 用的vant差价，这个$toast需要挂载在组件的实例对象上，这里不是组件不能直接这样用
            // this.$toast('请先登录');
            // 因为上边引入过vue了所以可以在vue的prototype上找
            Vue.prototype.$toast({
                type: 'fail',//失败
                message: '请先登录',//提示信息
                duration: 1000//提示信息显示1秒
            })
            // 因为提示信息1秒，这里可以等待一秒后跳转再到登录页
            // setTimeout(() => {
            // }, 1000);
            next('/wd')
        }
    } else {
        // 非购物车页
    }
})

// 导出在根实例引入，让每个组件都能使用
export default router
